<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据可视化</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/flexb.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 整体大盒子 -->
    <div class="view">
        <!-- 左侧容器 -->
        <div class="leftContainer">
            <div class="left_top">
            </div>


            <!-- 中间部分 -->
            <div class="left_middle">
                <!-- 标题部分 -->
                <div class="top_title">
                    <a href="javascript:;" class="active" data-myclass="left_table">故障设备监控</a>
                    <div class="line_box"></div>
                    <a href="javascript:;" data-myclass="right_table">异常设备监控</a>
                </div>

                <!-- table标题 -->
                <div class="table_title">
                    <span>故障时间</span>
                    <span>设备地址</span>
                    <span>异常代码</span>
                </div>

                <!-- 底部table -->
                <div class="bottom_table" id="table">
                    <!-- 设备故障监控栏 -->
                    <div class="left_table public">
                        <ul>
                            <li>
                                <span>2025年</span>
                                <span>大连甘井子区嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025年</span>
                                <span>大连甘井子区嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025年</span>
                                <span>大连甘井子区嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025年</span>
                                <span>大连甘井子区嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025年</span>
                                <span>大连甘井子区嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025年</span>
                                <span>大连甘井子区嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025年</span>
                                <span>大连甘井子区嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025年</span>
                                <span>大连甘井子区嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025年</span>
                                <span>大连甘井子区嘉创大厦</span>
                                <span>10086</span>
                            </li>
                            <li>
                                <span>2025年</span>
                                <span>大连甘井子区嘉创大厦</span>
                                <span>10086</span>
                            </li>
                        </ul>
                    </div>
                    <!-- 异常设备监控栏 -->
                    <div class="right_table public" style="display: none;">
                        <ul>
                            <li>
                                <span>2026年</span>
                                <span>甘井子区万达</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2026年</span>
                                <span>甘井子区万达</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2026年</span>
                                <span>甘井子区万达</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2026年</span>
                                <span>甘井子区万达</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2026年</span>
                                <span>甘井子区万达</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2026年</span>
                                <span>甘井子区万达</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2026年</span>
                                <span>甘井子区万达</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2026年</span>
                                <span>甘井子区万达</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2026年</span>
                                <span>甘井子区万达</span>
                                <span>10010</span>
                            </li>
                            <li>
                                <span>2026年</span>
                                <span>甘井子区万达</span>
                                <span>10010</span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>


            <!-- 底部容器 -->
            <div class="left_bottom">
                <div class="title">
                    <h3>定位分布统计</h3>
                </div>

                <div class="content">
                    <!-- 饼状图 -->
                    <div class="pie_box"></div>

                    <!-- 数据部分 -->
                    <div class="data_box">
                        <div class="item">
                            <h3>320,11</h3>
                            <p>
                                <span class="icon-dot"></span>
                                点位总数
                            </p>
                        </div>
                        <div class="item">
                            <h3>418</h3>
                            <p>
                                <span class="icon-dot"></span>
                                本月新增
                            </p>
                        </div>

                    </div>
                </div>
            </div>
        </div>





        <!-- 中间 -->
        <div class="middleContainer">
            <div class="middleContainer_top_title">
                <span class="icon-cube"></span>
                <h3>设备数据统计</h3>
            </div>

            <div class="map"></div>

            <div class="bottom_box">
                <div class="title">
                    <h3>全国用户总量统计</h3>
                </div>
                <div class="content">
                    <div class="bar_box"></div>
                    <div class="data">
                        <div class="item">
                            <h3>320,11</h3>
                            <p>
                                <span class="icon-dot"></span>
                                点位总数
                            </p>
                        </div>

                        <div class="item">
                            <h3>418</h3>
                            <p>
                                <span class="icon-dot"></span>
                                本月新增
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <!-- 右侧 -->
        <div class="rightContainer">

            <div class="rightContainer_top">
                <!-- title -->
                <div class="rightContainer_top_title">
                    <a href="javascript:;" class="active" data-myTable="table0ne">365天</a>
                    <div class="line"></div>
                    <a href="javascript:;" data-myTable="tableTwo">90天</a>
                    <div class="line"></div>
                    <a href="javascript:;" data-myTable="tableThree">30天</a>
                    <div class="line"></div>
                    <a href="javascript:;" data-myTable="tableFour">24小时</a>
                    <div class="line"></div>
                </div>
                <!-- 内容 -->
                <div class="top_content">
                    <div class="table0ne table">
                        <div class="content">
                            <div class="item">
                                <h3>987</h3>
                                <p>
                                    <span class="icon-dot"></span>
                                    订单量
                                </p>
                            </div>
                            <div class="item">
                                <h3>1834</h3>
                                <p>
                                    <span class="icon-dot"></span>
                                    销售额(万元)
                                </p>
                            </div>
                        </div>

                    </div>

                    <div class="tableTwo table" style="display: none;">
                        <div class="content">
                            <div class="item">
                                <h3>123</h3>
                                <p>
                                    <span class="icon-dot"></span>
                                    订单量
                                </p>
                            </div>
                            <div class="item">
                                <h3>1994</h3>
                                <p>
                                    <span class="icon-dot"></span>
                                    销售额(万元)
                                </p>
                            </div>
                        </div>

                    </div>

                    <div class="tableThree table" style="display: none;">
                        <div class="content">
                            <div class="item">
                                <h3>463</h3>
                                <p>
                                    <span class="icon-dot"></span>
                                    数据量
                                </p>
                            </div>
                            <div class="item">
                                <h3>3000</h3>
                                <p>
                                    <span class="icon-dot"></span>
                                    销售额(千元)
                                </p>
                            </div>
                        </div>

                    </div>

                    <div class="tableFour table" style="display: none;">
                        <div class="content">
                            <div class="item">
                                <h3>789</h3>
                                <p>
                                    <span class="icon-dot"></span>
                                    设备量
                                </p>
                            </div>
                            <div class="item">
                                <h3>9990</h3>
                                <p>
                                    <span class="icon-dot"></span>
                                    单价(万元)
                                </p>
                            </div>
                        </div>

                    </div>

                </div>
            </div>

            <div class="middle_linear">
                <div class="title">
                    <h3>销售额统计</h3>
                    <div class="line"></div>
                    <p class="active" data-mydata="year">年</p>
                    <p data-mydata="quarter">季</p>
                    <p data-mydata="month">月</p>
                    <p data-mydata="week">日</p>
                </div>
                <div class="linear"></div>
            </div>



            <div class="middle_data">
                <div class="left_data">
                    <div class="title">
                        <h3>渠道分布</h3>
                    </div>

                    <div class="content">
                        <div class="item">
                            <h3>19%</h3>
                            <p>
                                <span class="icon-plane"></span>
                                机场
                            </p>
                        </div>
                        <div class="item">
                            <h3>29%</h3>
                            <p>
                                <span class="icon-plane"></span>
                                火车站
                            </p>
                        </div>
                        <div class="item">
                            <h3>39%</h3>
                            <p>
                                <span class="icon-bus"></span>
                                公交车
                            </p>
                        </div>
                        <div class="item">
                            <h3>49%</h3>
                            <p>
                                <span class="icon-plane"></span>
                                机场
                            </p>
                        </div>
                    </div>

                </div>
                <div class="right_data">
                    <!-- 标题部分 -->
                    <div class="title">
                        <h3>
                            一季度销售进度
                        </h3>
                    </div>

                    <!-- 半圆区域 -->
                    <div class="half_circle">

                    </div>
                    <h3 class="cricle_content">50%</h3>

                    <!-- 底部数据 -->
                    <div class="botton_content">
                        <div class="item">
                            <h3>49%</h3>
                            <p>
                                <span class="icon-train"></span>
                                火车站
                            </p>
                        </div>

                        <div class="item">
                            <h3>39%</h3>
                            <p>
                                <span class="icon-plane"></span>
                                机场
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最下方盒子 -->
            <div class="bottom_data">
                <div class="left_box">
                    <div class="title">
                        <h3>全国热榜</h3>
                    </div>

                    <div class="content">
                        <div class="item">
                            <span class="icon-cup1"></span>
                            <span>可爱多</span>
                        </div>

                        <div class="item">
                            <span class="icon-cup2"></span>
                            <span>可爱中</span>
                        </div>

                        <div class="item">
                            <span class="icon-cup3"></span>
                            <span>可爱少</span>
                        </div>

                    </div>
                </div>

                <div class="right_box">
                    <div class="title">
                        <h3>各省热销</h3>
                        <span>
                            //进30日//
                        </span>
                    </div>

                    <div class="content">
                        <div class="content_left">
                            <ul>
                                <li data-myArea="BeiJing" class="active">
                                    <span>北京</span>
                                    <span>12345</span>
                                    <span class="icon-up"></span>
                                </li>
                                <li data-myArea="LiaoNing">
                                    <span>辽宁</span>
                                    <span>34567</span>
                                    <span class="icon-up"></span>
                                </li>
                                <li data-myArea="ShangHai">
                                    <span>上海</span>
                                    <span>56789</span>
                                    <span class="icon-down"></span>
                                </li>
                                <li data-myArea="HangZhou">
                                    <span>杭州</span>
                                    <span>98765</span>
                                    <span class="icon-up"></span>
                                </li>
                                <li data-myArea="ChongQing">
                                    <span>重庆</span>
                                    <span>67589</span>
                                    <span class="icon-up"></span>
                                </li>
                                
                            </ul>
                        </div>

                        <div class="content_right">

                                <ul class="BeiJing"  >
                                    <li>
                                        <span>一喜</span>
                                        <span>6010</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>二喜</span>
                                        <span>6230</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>三喜</span>
                                        <span>8010</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>四喜</span>
                                        <span>6970</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>五喜</span>
                                        <span>9999</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>六喜</span>
                                        <span>8888</span>
                                        <span class="icon-up"></span>
                                    </li>
                                </ul>
                                <ul class="LiaoNing" style="display: none;">
                                    <li>
                                        <span>一喜</span>
                                        <span>6010</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>二喜</span>
                                        <span>6230</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>三喜</span>
                                        <span>8010</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>四喜</span>
                                        <span>6970</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>五喜</span>
                                        <span>9999</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>六喜</span>
                                        <span>8888</span>
                                        <span class="icon-up"></span>
                                    </li>
                                </ul>
                                <ul class="ShangHai" style="display: none;">
                                    <li>
                                        <span>一喜</span>
                                        <span>6010</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>二喜</span>
                                        <span>6230</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>三喜</span>
                                        <span>8010</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>四喜</span>
                                        <span>6970</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>五喜</span>
                                        <span>9999</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>六喜</span>
                                        <span>8888</span>
                                        <span class="icon-down"></span>
                                    </li>
                                </ul>
                                <ul class="HangZhou" style="display: none;">
                                    <li>
                                        <span>一喜</span>
                                        <span>6010</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>二喜</span>
                                        <span>6230</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>三喜</span>
                                        <span>8010</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>四喜</span>
                                        <span>6970</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>五喜</span>
                                        <span>9999</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>六喜</span>
                                        <span>8888</span>
                                        <span class="icon-down"></span>
                                    </li>
                                </ul>
                                <ul class="ChongQing" style="display: none;">
                                    <li>
                                        <span>一喜</span>
                                        <span>6010</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>二喜</span>
                                        <span>6230</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>三喜</span>
                                        <span>8010</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>四喜</span>
                                        <span>6970</span>
                                        <span class="icon-down"></span>
                                    </li>
                                    <li>
                                        <span>五喜</span>
                                        <span>9999</span>
                                        <span class="icon-up"></span>
                                    </li>
                                    <li>
                                        <span>六喜</span>
                                        <span>8888</span>
                                        <span class="icon-up"></span>
                                    </li>
                                </ul>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>